<template>
  <div id="content">
    <div id="head">
      <van-icon name="arrow-left" @click="$router.push('/home')" />
      <van-search
        class="search"
        shape="round"
        background="transparent"
        placeholder="搜索"
        show-action
        @blur="onSearch"
        v-model="search"
      />
    </div>
    <div class="body">
        <RouterLink
          :to="`/redetail/${item.pid}`"
          v-for="(item) in searchResult"
          :key="item.pid"
        >
          <Recommend
          :imgname="item.imgname"
          :title="item.title"
          :label="item.label"
          :age="item.age"
          :sex="item.sex"
          :area="item.area"/>
        </RouterLink>
      </div>
  </div>
</template>

<script>
import { getSearch } from "@/api/home";
import Recommend from "./recommend";
export default {
  data() {
    return {
      search: "",
      searchResult: [],
    };
  },
  methods: {
    async onSearch() {
      let a = [];
      const data = await getSearch();
      data.data.message.forEach((item) => {
        if (item.title.indexOf(this.search) != -1) {
          this.searchResult.push(item);
        }
      });
      console.log(this.searchResult);
    },
  },
  components: {
    Recommend
  }
};
</script>

<style lang="scss" scoped>
#content {
  background: -webkit-gradient(linear, 0% 0%, 0% 35%, from(#face23), to(#fff));
  width: 100%;
  height: 100vh;
  position: absolute;
  z-index: 999;

  #head {
    width: 90%;
    overflow: hidden;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .van-search {
      width: 300px;
    }

    .van-search {
      font-size: 18px;
    }
    .van-search__action {
      display: none;
    }
  }

  .body {
        width: 90%;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }
}
</style>
